<template>
  <div class="topic">
    <van-nav-bar :title="title" @click.native="show = !show" />
    <span class="iconfont icon-CZ_012" v-if="show"></span>
    <span class="iconfont icon-CZ_014" v-else></span>
    <van-popup v-model="show" position="top" :style="{ height: '70%' }">
      <van-index-bar @change="fn">
        <div class="asss" v-for="(item, idenx) in keyList" :key="idenx">
          <van-index-anchor :index="item" />
          <van-cell
            v-for="(items, indexs) in citys[item]"
            :title="items"
            :key="indexs"
            @click="setcity(items)"
          />
        </div>
      </van-index-bar>
    </van-popup>

    <!-- 题目列表 -->
    <van-tabs v-model="active">
      <van-tab
        line-width="0"
        v-for="item in PositionList"
        :title="item.name"
        :key="item.id"
      >
      </van-tab>
    </van-tabs>

    <!-- 题目区域 -->
    <div class="position">
      <div class="one">
        <van-button color="#ff6666" type="primary">
          <van-icon size="25" name="description" />
          <div class="text">常错题库</div>
        </van-button>
        <van-button color="#00c4dc" type="primary">
          <van-icon size="25" name="hotel-o" />
          <div class="text">企业题库</div>
        </van-button>
      </div>
      <div class="two">
        <van-circle
          v-model="currentRate"
          :rate="15"
          :speed="100"
          :stroke-width="40"
          :size="130"
          color="#f0305e"
        />
        <van-button color="#e91648" type="primary">
          <div>顺序刷题</div>
          <span>18/233</span>
        </van-button>
      </div>
      <div class="one">
        <van-button color="#ffc403" type="primary">
          <van-icon size="25" name="records" />
          <div class="text">企业题库</div>
        </van-button>
        <van-button color="#29d28e" type="primary">
          <van-icon size="25" name="completed" />
          <div class="text">已答题库</div>
        </van-button>
      </div>
    </div>
    <!-- 替补div -->
    <div class="tibu"></div>
    <!-- 累计收录 -->
    <div class="included">
      <p>累计收录</p>
      <h2>{{ totalCount }}</h2>
    </div>
    <!-- 开始模拟面试 -->
    <van-button
      class="start"
      type="primary"
      size="large"
      @click="
        $router.push({
          path: '/layout/topic/test',
          query: {
            id: PositionList[active].id,
            city: title
          }
        })
      "
      >模拟面试</van-button
    >
  </div>
</template>

<script>
import { getFilters } from '@/api/filters'
export default {
  data () {
    return {
      title: '全国',
      show: false,
      keyList: [],
      citys: [],
      PositionList: [
        { name: '服务端', id: 355 },
        { name: '测试', id: 361 },
        { name: '前端', id: 354 },
        { name: '行政', id: 360 },
        { name: '移动端', id: 358 },
        { name: '架构', id: 363 },
        { name: '产品', id: 359 },
        { name: '设计', id: 357 },
        { name: '实习', id: 364 },
        { name: '数据', id: 365 }
      ],
      active: 0,
      cityPositions: '',
      currentRate: 18, // 百分比
      totalCount: 0
    }
  },
  async created () {
    const res = await getFilters()
    const a = res.data.data
    this.keyList = Object.keys(a.citys)
    this.citys = a.citys
    this.cityPositions = a.cityPositions
    this.totalCount = a.totalCount
  },
  methods: {
    showPopup () {
      this.show = true
    },
    // 点击子组件选择城市的题
    setcity (items) {
      this.title = items
      this.PositionList = this.cityPositions[this.title]
      this.show = false
    },
    fn (index) {
      this.$toast({
        message: `${index}`,
        icon: 'l111',
        duration: 500,
        className: 'nihoa'
      })
    }
  }
}
</script>

<style lang="less">
.topic {
  // position: relative;
  background-color: #f7f4f5;
  height: 100vh;
  // 图标
  .iconfont {
    color: #da5765;
    position: absolute;
    top: 0;
    left: 62%;
    margin-top: 16px;
    z-index: 8888;
  }
  .van-toast__text.nihao {
    font-size: 24px;
  }
  .van-nav-bar {
    z-index: 3000;
    position: relative;
  }
  .van-overlay {
    z-index: 500 !important;
  }
  .van-popup .van-nav-bar {
    position: relative;
    z-index: 1000;
  }
  .van-popup {
    top: 90px;
    .van-popup--top {
      z-index: 550;
    }
  }
  // 设置面试宝典
  .van-ellipsis {
    font-size: 12px;
    color: #ccc;
    &::before {
      font-size: 18px;
      content: '面试宝典';
      color: #000;
    }
  }
  .top {
    display: flex;
    top: 0;
    justify-content: center;
    text-align: center;
    border-bottom: 1px solid #ccc;
    line-height: 35px;
    height: 35px;
    z-index: 4000;
    > span {
      color: rgb(204, 91, 15);
    }
  }
  //题目列表
  .van-tabs {
    z-index: 3000;
    position: relative;

    .van-tabs__line {
      display: none;
    }
    .van-tab {
      .van-tab__text {
        min-width: 60px;
        height: 30px;
        display: block;
        border-radius: 15px;
        background-color: #f7f4f5;
        line-height: 32px;
        font-size: 14px;
        text-align: center;
        color: #545671;
      }
      &.van-tab--active {
        .van-tab__text {
          background-color: #00b8d4;
          color: #ffffff;
        }
      }
    }
  }
  .position {
    height: 200px;
    // border: 1px solid #000;
    background-color: #fff;
    display: flex;
    overflow: hidden;
    > div {
      flex: 1;
      &.two {
        .van-circle {
          position: absolute;
        }
        display: flex;
        justify-content: space-around;
        align-items: center;
        .van-button {
          width: 100px;
          height: 100px;
          border-radius: 50%;
        }
      }
      &.one {
        flex-direction: column;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .van-button {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          .van-icon.van-icon-records.van-button__icon {
            font-size: 16px;
          }
          .text {
            position: absolute;
            width: 60px;
            height: 20px;
            font-size: 12px;
            background-color: #fff;
            color: #000;
            bottom: -30px;
            left: -5px;
          }
        }
      }
    }
  }
  .tibu {
    height: 20px;
    background-color: #fff;
  }
  .included {
    background-color: #fff;
    height: 40vw;
    text-align: center;
    p {
      line-height: 40px;
    }
    h2 {
      line-height: 40px;
      font-size: 32px;
    }
  }
  .van-button.start {
    margin: 20px 4vw;
    background-color: #00b8d4;
    width: 92vw;
    border: 1px solid #00b8d4;
    border-radius: 5px;
  }
}
</style>
